<template>
  <div class="main">
    <div class="center">
      <div class="title">
        <div>数据分析</div>
      </div>
      <!-- 1 -->
      <div class="top">
        <div class="LineTitle" style="height:0.6rem">
          <div class="LineTitle_title">{{ model1Title }}</div>
          <div class="LineTitle_select">
            <el-select v-model="model1Value" placeholder="请选择">
              <el-option
                v-for="item in model1Options"
                :key="item.modelValue"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="top_bot LR">
          <div class="top_left L50">
            <line-chart bk-color="#FFF" />
          </div>
          <div class="top_right L50">
            <LeidaChart />
          </div>
        </div>
      </div>
      <!-- 2 -->
      <div class="middle LR">
        <div class="middle_left L50">
          <div class="LineTitle">
            <div class="LineTitle_title">{{ model1Title }}</div>
            <div class="LineTitle_select">
              <el-select v-model="model1Value" placeholder="请选择">
                <el-option
                  v-for="item in model1Options"
                  :key="item.modelValue"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="LineChart">
            <line-chart bk-color="#FFF" />
          </div>
        </div>
        <div class="middle_right L50">
          <div class="LineTitle">
            <div class="LineTitle_title">{{ model2Title }}</div>
            <div class="LineTitle_select">
              <el-select v-model="model2Value" placeholder="请选择">
                <el-option
                  v-for="item in model1Options"
                  :key="item.modelValue"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="LineChart">
            <line-chart bk-color="#FFF" />
          </div>
        </div>
      </div>
      <!-- 3 -->
      <div class="bottom LR">
        <div class="bottom_left L50">
          <div class="LineTitle">
            <div class="LineTitle_title">{{ model3Title }}</div>
            <div class="LineTitle_select">
              <el-select v-model="model3Value" placeholder="请选择">
                <el-option
                  v-for="item in model1Options"
                  :key="item.modelValue"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="LineChart">
            <line-chart bk-color="#FFF" />
          </div>
        </div>
        <div class="bottom_right L50">
          <div class="LineTitle">
            <div class="LineTitle_title">{{ model4Title }}</div>
            <div class="LineTitle_select">
              <el-select v-model="model4Value" placeholder="请选择">
                <el-option
                  v-for="item in model1Options"
                  :key="item.modelValue"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="LineChart">
            <line-chart bk-color="#FFF" />
          </div>
        </div>
      </div>
      <!-- 4 -->
      <div class="sandianChart">
        <div class="LineTitle" style="height:0.6rem">
          <div class="LineTitle_title">{{ model4Title }}</div>
          <div class="LineTitle_select">
            <el-select v-model="model4Value" placeholder="请选择">
              <el-option
                v-for="item in model1Options"
                :key="item.modelValue"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="sanChart">
          <sandian-chart />
        </div>
      </div>
      <!-- 5 -->
      <div class="table">
        <div class="LineTitle" style="height:0.6rem">
          <div class="LineTitle_title">{{ model5Title }}</div>
          <div class="LineTitle_select">
            <el-select v-model="model5Value" placeholder="请选择">
              <el-option
                v-for="item in model1Options"
                :key="item.modelValue"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="sanChart">
          <Table />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import LineChart from './components/LineChart'
import LeidaChart from './components/LeidaChart'
import SandianChart from './components/SandianChart'
import Table from './components/Table'
export default {
  components: {
    LineChart,
    LeidaChart,
    SandianChart,
    Table
  },
  data() {
    return {
      modelTop: '实时动态位移数据分析',
      modelBot: '散点图数据分析',
      modelEnd: '表面位移数据列表',
      model1Title: '累计位移数据分析',
      model2Title: '位移速率数据分析',
      model3Title: '切线角数据分析',
      model4Title: '加速度数据分析',
      model5Title: '表面位移数据列表',
      model1Value: 1,
      model2Value: 1,
      model3Value: 1,
      model4Value: 1,
      model5Value: 1,
      model1Options: [
        {
          value: 1,
          label: 'A工厂'
        }, {
          value: 2,
          label: 'B工厂'
        }, {
          value: 3,
          label: 'C工厂'
        }, {
          value: 4,
          label: 'D工厂'
        }
      ]
    }
  },
  mounted() { },
  methods: {}
}
</script>
<style lang="scss" scoped>
$a: 100%;
.main {
  position: absolute;
  width: $a;
  height: $a;
  background-color: #eee;
  overflow-y: auto;
  .top{
    background-color: #FFF;
  }
  .center {
    margin: 0.3rem;
    .title {
      height: 1rem;
      width: $a;
      background-color: rgb(48, 65, 86);
      color: #FFF;
      margin-bottom: 0.3rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      div {
        margin-left: 0.3rem;
        font-size: 0.2rem;
      }
    }
  }
  .LR {
    height: 4rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #FFF;
    margin-bottom: 0.3rem;
    .L50 {
      width: 48%;
      height: $a;
      position: relative;
      .LineChart{
        height:85%;
        position: relative;
      }
    }
  }
  .LineTitle {
    color: #333;
    height: 15%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .LineTitle_title {
      margin: 0 0.2rem 0;
    }
    border-bottom: 1px solid #ddd;
  }
  .sandianChart {
    height: 4rem;
    width: $a;
    margin-bottom: 0.3rem;
    background-color: #FFF;
  }
  .table {
    height: 5rem;
    width: $a;
    background-color: #FFF;
  }
  .sanChart{
    height:85%;
    position: relative;
  }
}
</style>
